<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Map tiles</title>
<!--    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAFjdUh50p0uhLI80FpgoFChTMws6U0effFAcQCX88e2MDUbNfdxTyi8Kg5CDzNqSGHIEW9iFl78UM2Q'></script>-->
    <link rel="stylesheet" href="style.css" type="text/css" />

    <style type="text/css">
        #map {
            width: 100%;
            height: 80%;
            border: 1px solid black;
        }
        .olPopup p { margin:0px; font-size: .9em;}
        .olPopup h2 { font-size:1.2em; }
    </style>

<!--    <script src="http://openlayers.org/api/OpenLayers.js"></script>-->
<!--    <script src="http://dev.openlayers.org/nightly/OpenLayers.js"></script>-->
    <script src="lib/OpenLayers.js"></script>


  <script type="text/javascript">
        var lon = -0.5;
        var lat = 51.5;
        var zoom = 10;
        var map, select;

        function init(){
            var options = {
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                units: "m",
                maxResolution: 156543.0339,
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                                 20037508.34, 20037508.34),
		numZoomLevels: 20,
		controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.LayerSwitcher({'ascending':false}),
                        new OpenLayers.Control.Permalink(),
                        new OpenLayers.Control.ScaleLine(),
                        new OpenLayers.Control.MousePosition(),
                        new OpenLayers.Control.KeyboardDefaults(),
                        new OpenLayers.Control.Graticule({
			  intervals: [1,5],
			  displayInLayerSwitcher: true,
			  numPoints: 1,
                          labelled: true,
                          visible: false
})
                    ]
            };
            map = new OpenLayers.Map('map', options);
            var mapnik = new OpenLayers.Layer.TMS(
                "OpenStreetMap.org Mapnik",
                "http://tile.openstreetmap.org/",
                {
                    type: 'png', getURL: osm_getTileURL,
                    displayOutsideMaxExtent: true,
                    attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
                }
            );
            var mapnikmod = new OpenLayers.Layer.TMS(
                "Local mod_tile default",
                "/osm_tiles2/",
                {
                    type: 'png', getURL: osm_getTileURL,
                    displayOutsideMaxExtent: true,
                    attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
                }
            );
            var generate = new OpenLayers.Layer.TMS(
                "generated tiles",
                "/tiles/",
                {
                    type: 'png', getURL: osm_getTileURL,
                    displayOutsideMaxExtent: true,
                    attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
                }
            );
            var mapniktilecache = new OpenLayers.Layer.TMS(
                "Local tilecache",
                "/tilecache/1.0.0/osm/",
                {
                    type: 'png', getURL: osm_getTileURL,
                    displayOutsideMaxExtent: true,
                    attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
                }
            );
            var cyclemap = new OpenLayers.Layer.TMS(
                "OpenCycleMap",
                "http://c.andy.sandbox.cloudmade.com/tiles/cycle/",
                {
                    type: 'png', getURL: osm_getTileURL,
                    displayOutsideMaxExtent: true,
                    attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>, OpenCycleMap.org'
                }
            );
//            var gmap = new OpenLayers.Layer.Google("Google", {sphericalMercator:true});

            map.addLayers([generate, mapnikmod,mapnik, cyclemap]);

            map.addControl(new OpenLayers.Control.LayerSwitcher());

            map.zoomToExtent(
                new OpenLayers.Bounds(
                    -160, -80, 160, 80
                ).transform(map.displayProjection, map.projection)
            );
        }
        function onPopupClose(evt) {
            select.unselectAll();
        }
        function onFeatureSelect(event) {
            var feature = event.feature;
            var selectedFeature = feature;
            var popup = new OpenLayers.Popup.FramedCloud("chicken", 
                feature.geometry.getBounds().getCenterLonLat(),
                new OpenLayers.Size(100,100),
                "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
                null, true, onPopupClose
            );
            feature.popup = popup;
            map.addPopup(popup);
        }
        function onFeatureUnselect(event) {
            var feature = event.feature;
            if(feature.popup) {
                map.removePopup(feature.popup);
                feature.popup.destroy();
                delete feature.popup;
            }
        }
        function osm_getTileURL(bounds) {
            var res = this.map.getResolution();
            var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
            var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
            var z = this.map.getZoom();
            var limit = Math.pow(2, z);

            if (y < 0 || y >= limit) {
                return OpenLayers.Util.getImagesLocation() + "404.png";
            } else {
                x = ((x % limit) + limit) % limit;
                return this.url + z + "/" + x + "/" + y + "." + this.type;
            }
        }
    </script>
  </head>
  <body onload="init()">
      <h1 id="title">OSM</h1>

      <div id="tags"></div>

      <p id="shortdesc">
    </p>

    <div id="map" class="smallmap"></div>

    <div id="docs"></div>
  </body>
</html>

